<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
    <div class=" mt-4  pb-4 f-b " style="font-size: 24px">
        Data table
    </div>

        <div style="font-size: 24px; margin-top: 60px" class="f-b">
            Default
        </div>
        <dfault-vuew>
            <template v-slot:htm>
                <div class="d-flex flex-column" style="width: 100%">
                    <div class="col-8 p-0">
                        <table class="unis-data-table">
                            <thead>
                            <tr>
                                <th>Message</th>
                                <th>Sent to number</th>
                                <th>Status</th>
                                <th>Sent</th>
                                <th>Sent method</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="index in 6">
                                <td>[UNIS] Your shipment PRO#400004...</td>
                                <td>8582295099</td>
                                <td class="f-13 f-b ft-succeedHint" v-if="index !=4">Success</td>
                                <td class="f-13 f-b ft-red900" v-if="index ==4">Fail</td>
                                <td>12/20/20 9:52 AM</td>
                                <td>Twilio.text</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

            </template>
            <template v-slot:htmcode>
                <table class="unis-data-table">
                    <thead>
                    <tr>
                        <th>Message</th>
                        <th>Sent to number</th>
                        <th>Status</th>
                        <th>Sent</th>
                        <th>Sent method</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="index in 6">
                        <td>[UNIS] Your shipment PRO#400004...</td>
                        <td>8582295099</td>
                        <td class="f-13 f-b ft-succeedHint" v-if="index !=4">Success</td>
                        <td class="f-13 f-b ft-red900" v-if="index ==4">Fail</td>
                        <td>12/20/20 9:52 AM</td>
                        <td>Twilio.text</td>
                    </tr>

                    </tbody>
                </table>
            </template>
        </dfault-vuew>

        <div style="font-size: 24px; margin-top: 20px" class="f-b">
            Variants
        </div>
        <div style="font-size:18px; margin-top: 20px" class="f-b">
            With selection
        </div>
        <div style="font-size:16px; margin-top: 20px" class="f-b">
            Default
        </div>
        <dfault-vuew>
            <template v-slot:htm>
                <div class="d-flex flex-column" style="width: 100%">
                    <div class="col-8 p-0">
                        <table class="unis-data-table">
                            <thead>
                            <tr>
                                <th class="td-check-box"><input type="checkbox" name="layout" id="c6s1" class="unis-checkbox">
                                    <label for="c6s1">
                                        <span class="pl-3_5"></span>
                                    </label></th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Description</th>
                                <th>Modified by</th>
                                <th><button class="unis-sort-order">Last modified
                                    <span class="scale8">
            <i class=" icon-47 f-14 ml-2"></i>
       </span>
                                </button></th>
                                <th>Active</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="index in 2">
                                <td class="td-check-box"><input type="checkbox" name="layout" :id="'c1'+index" class="unis-checkbox">
                                    <label :for="'c1'+index">
                                        <span class="pl-3_5"></span>
                                    </label></td>
                                <td>PickOrder</td>
                                <td>TMS</td>
                                <td>Pick up orders</td>
                                <td>TMSAdmin</td>
                                <td>12/20/20 9:52 AM </td>
                                <td><button class="unis-active bg-grassgreen200 ft-grassgreen900 ">Active</button> </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

            </template>
            <template v-slot:htmcode>
                <table class="unis-data-table">
                    <thead>
                    <tr>
                        <th class="td-check-box"><input type="checkbox" name="layout" id="c5s1" class="unis-checkbox">
                            <label for="c5s1">
                                <span class="pl-3_5"></span>
                            </label></th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Modified by</th>
                        <th><button class="unis-sort-order">Last modified
                            <span class="scale8">
            <i class=" icon-47  ml-2"></i>
       </span>
                        </button></th>
                        <th>Active</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="index in 2">
                        <td class="td-check-box"><input type="checkbox" name="layout" :id="'c1'+index" class="unis-checkbox">
                            <label :for="'c1'+index">
                                <span class="pl-3_5"></span>
                            </label></td>
                        <td>PickOrder</td>
                        <td>TMS</td>
                        <td>Pick up orders</td>
                        <td>TMSAdmin</td>
                        <td>12/20/20 9:52 AM </td>
                        <td><button class="unis-active bg-grassgreen200 ft-grassgreen900 ">Active</button> </td>
                    </tr>

                    </tbody>
                </table>
            </template>
        </dfault-vuew>
        <div style="font-size:16px; margin-top: 80px" class="f-b">
            Hover over “more” button
        </div>
        <dfault-vuew>
            <template v-slot:htm>
                <div class="d-flex flex-column" style="width: 100%">
                    <div class="col-8 p-0">
                        <table class="unis-data-table">
                            <thead>
                            <tr>
                                <th class="td-check-box"><input type="checkbox" name="layout" id="c4s1" class="unis-checkbox">
                                    <label for="c4s1">
                                        <span class="pl-3_5"></span>
                                    </label></th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Description</th>
                                <th>Modified by</th>
                                <th><button class="unis-sort-order">Last modified
                                    <span class="scale8">
            <i class=" icon-47 f-14 ml-2"></i>
       </span>
                                </button></th>
                                <th>Active</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="index in 2">
                                <td class="td-check-box"><input type="checkbox" name="layout" :id="'c01'+index" class="unis-checkbox">
                                    <label :for="'c01'+index">
                                        <span class="pl-3_5"></span>
                                    </label></td>
                                <td>PickOrder</td>
                                <td>TMS</td>
                                <td>Pick up orders</td>
                                <td>TMSAdmin</td>
                                <td>12/20/20 9:52 AM </td>
                                <td class="d-flex align-items-center">
                                    <div>
                                        <button class="unis-active bg-grassgreen200 ft-grassgreen900 ">Active</button></div>

                                        <div class="unis-icon-btn ml-4  unis-dropdown unis-icon-btn-option h-w-32  " :class="{'active':index==1}">
                                        <span class="icon-57 f-18"></span>
                                    </div>

                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

            </template>
            <template v-slot:htmcode>
                <table class="unis-data-table">
                    <thead>
                    <tr>
                        <th class="td-check-box"><input type="checkbox" name="layout" id="c3s1" class="unis-checkbox">
                            <label for="c3s1">
                                <span class="pl-3_5"></span>
                            </label></th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Modified by</th>
                        <th><button class="unis-sort-order">Last modified
                            <span class="scale8">
            <i class=" icon-47 f-14 ml-2"></i>
       </span>
                        </button></th>
                        <th>Active</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="index in 2">
                        <td class="td-check-box"><input type="checkbox" name="layout" :id="'cw1'+index" class="unis-checkbox">
                            <label :for="'cw1'+index">
                                <span class="pl-3_5"></span>
                            </label></td>
                        <td>PickOrder</td>
                        <td>TMS</td>
                        <td>Pick up orders</td>
                        <td>TMSAdmin</td>
                        <td>12/20/20 9:52 AM </td>
                        <td class="d-flex align-items-center">
                            <div>
                                <button class="unis-active bg-grassgreen200 ft-grassgreen900 ">Active</button></div>
                            <div><div class="unis-icon-btn ml-4 unis-icon-btn-optionm ml-4 h-w-32 active">
                                <span class="icon-57 f-18"></span>
                            </div>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </template>
        </dfault-vuew>
        <div style="font-size:16px; margin-top: 120px" class="f-b">
            Batch actions
        </div>
        <dfault-vuew>
            <template v-slot:htm>
                <div class="d-flex " style="width: 100%">
                    <div class="col-8 p-0 d-flex  flex-wrap ">
                        <div class="col-12 d-flex align-items-center">
                            <div class="mb-3 mr-3">
                                <div class="unis-stepper">
                                    <button >
                                        <i class="icon-31"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="mb-3 ml-3 mr-3">
                                <button class="unis-icon-btn">
                                    <i class="icon-56"></i>
                                </button>
                            </div>
                            <div class="mb-3 mr-3">
                                <button class="unis-icon-btn active">
                                    <i class="icon-45"></i>
                                </button>
                            </div>
                            <div class="mb-3">
                                <button class="unis-icon-btn">
                                    <i class="icon-37"></i>
                                </button>
                            </div>
                        </div>

                        <table class="unis-data-table">
                            <thead>
                            <tr>
                                <th class="td-check-box"><input type="checkbox" name="layout" id="c2ss1" class="unis-checkbox">
                                    <label for="c2ss1">
                                        <span class="pl-3_5"></span>
                                    </label></th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Description</th>
                                <th>Modified by</th>
                                <th><button class="unis-sort-order">Last modified
                                    <span class="scale8">
            <i class=" icon-47 f-14 ml-2"></i>
       </span>
                                </button></th>
                                <th>Active</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="index in 2">
                                <td class="td-check-box"><input type="checkbox" name="layout" :id="'ce1'+index" class="unis-checkbox">
                                    <label :for="'ce1'+index">
                                        <span class="pl-3_5"></span>
                                    </label></td>
                                <td>PickOrder</td>
                                <td>TMS</td>
                                <td>Pick up orders</td>
                                <td>TMSAdmin</td>
                                <td>12/20/20 9:52 AM </td>
                                <td class="d-flex align-items-center">
                                    <div>
                                        <button class="unis-active bg-grassgreen200 ft-grassgreen900 ">Active</button></div>
                                    <div><div class="unis-icon-btn unis-icon-btn-optionm ml-4 h-w-32">
                                        <span class="icon-57 f-18"></span>
                                    </div>
                                    </div>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

            </template>
            <template v-slot:htmcode>

                <div class="d-flex align-items-center">
                    <div class="mb-3 mr-3">
                        <div class="unis-stepper">
                            <button >
                                <i class="icon-31"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-3 ml-3 mr-3">
                        <button class="unis-icon-btn">
                            <i class="icon-56"></i>
                        </button>
                    </div>
                    <div class="mb-3 mr-3">
                        <button class="unis-icon-btn">
                            <i class="icon-45"></i>
                        </button>
                    </div>
                    <div class="mb-3">
                        <button class="unis-icon-btn">
                            <i class="icon-37"></i>
                        </button>
                    </div>
                </div>
                <table class="unis-data-table">
                    <thead>
                    <tr>
                        <th class="td-check-box"><input type="checkbox" name="layout" id="c7s1" class="unis-checkbox">
                            <label for="c7s1">
                                <span class="pl-3_5"></span>
                            </label></th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Modified by</th>
                        <th><button class="unis-sort-order">Last modified
                            <span class="scale8">
            <i class=" icon-47 f-14 ml-2"></i>
       </span>
                        </button></th>
                        <th>Active</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="index in 2">
                        <td class="td-check-box"><input type="checkbox" name="layout" :id="'cr1'+index" class="unis-checkbox">
                            <label :for="'cr1'+index">
                                <span class="pl-3_5"></span>
                            </label></td>
                        <td>PickOrder</td>
                        <td>TMS</td>
                        <td>Pick up orders</td>
                        <td>TMSAdmin</td>
                        <td>12/20/20 9:52 AM </td>
                        <td class="d-flex align-items-center">
                            <div>
                                <button class="unis-active bg-grassgreen200 ft-grassgreen900 ">Active</button></div>
                            <div><div class="unis-icon-btn unis-icon-btn-optionm ml-4 h-w-32">
                                <span class="icon-57 f-18"></span>
                            </div>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </template>
        </dfault-vuew>
        <div style="font-size:24px; margin-top: 120px" class="f-b">
            Time table
        </div>
        <dfault-vuew>
            <template v-slot:htm>
                <div class="d-flex flex-column" style="width: 100%">
                    <div class="col-8 p-0 d-flex flex-column">


                        <table class="unis-time-table">
                            <thead>
                            <tr>
                                <th colspan="2">FRIDAY, JAN 15, 2020</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="index in 2">
                                <td><span class="f-13 f-b">11/20/20 </span>
                                    <br>
                                    <span class="f-13 f-b">11:14 AM </span></td>
                                <td>Shipment update/notification</td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="unis-time-table mt-4">
                            <thead>
                            <tr>
                                <th colspan="2">FRIDAY, JAN 15, 2020</th>

                            </tr>                    </thead>
                            <tbody>
                            <tr v-for="index in 2">
                                <td><span class="f-13 f-b">11/20/20 </span>
                                    <br>
                                    <span class="f-13 f-b">11:14 AM </span></td>
                                <td>Shipment update/notification</td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                </div>

            </template>
            <template v-slot:htmcode>
                <table class="unis-time-table">
                    <thead>
                    <tr>

                        <th colspan="2">FRIDAY, JAN 15, 2020</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="index in 2">
                        <td><span class="f-13 f-b">11/20/20 </span>
                            <br>
                            <span class="f-13 f-b">11:14 AM </span></td>
                        <td>Shipment update/notification</td>
                    </tr>

                    </tbody>
                </table>
                <table class="unis-time-table mt-4">
                    <thead>
                    <tr>

                        <th colspan="2">FRIDAY, JAN 15, 2020</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="index in 2">
                        <td><span class="f-13 f-b">11/20/20 </span>
                            <br>
                            <span class="f-13 f-b">11:14 AM </span></td>
                        <td>Shipment update/notification</td>
                    </tr>

                    </tbody>
                </table>
            </template>
        </dfault-vuew>



        <div style="height: 80px;">

        </div>

    </div>

    <script src="../js/beautify2.js" type="text/javascript"></script>
    <script src="../js/beautify-css2.js" type="text/javascript"></script>
    <script src="../js/beautify-html2.js" type="text/javascript"></script>
    <script src="../js/highlight.min.js"></script>
    <script type="text/javascript" >
      var components = {
        template: dfaulthtml,
        props: {
          layout: {
            default: 1,
          }
        },
        data: function () {
          return {
            idShowCode: false,
            codeHtml: ''
          }
        },
        beforeCreate(){
          pageBeforeCreate();
        },
        methods: {
          showCode: function () {
            this.idShowCode = !this.idShowCode;
          }
        },
      };
      new Vue({
        el: "#childApp",
        components: {'DfaultVuew': components},
        data: function () {
          return {
            idShowCode: false
          };
        },
        computed: {},
        methods: {
          showCode: function () {
            this.idShowCode = !this.idShowCode;
          }
        },

      });
    </script>
    <script src="../js/cods.js"></script>
</body>
</html>